<template>
    <el-dialog title="选择部门" :visible.sync="openDepartment" width="800px" @close="cancel()"> 
        <div>
            <div class="choiceList">
                <div>
                    <el-tag
                        v-for="tag in tags"
                        :key="tag.id"
                        @close="handleClose(tag)"
                        closable>
                        {{tag.name}}
                    </el-tag>
                </div>
            </div>
            <div class="treeContent">
                <div class="head-container">
                    <el-input v-model="deptName" placeholder="部门名称(只搜索已加载数据)" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px"/>
                </div>
                <div class="head-container-tree">
                <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" node-key="id"
                        ref="tree" default-expand-all  show-checkbox :check-strictly="true"  @check-change="handleCheckChange" :filter-node-method="filterNode"/>
                </div>
            </div>
            <div class="button">
                <el-button  @click="cancel">取消</el-button> 
                <el-button @click="clear">清空</el-button> 
                <el-button type="primary" @click="select">选择</el-button> 
            </div>
        </div>
    </el-dialog>
</template>

<script>
import {listSimpleDepts} from "@/api/system/dept";
import {listSimplePosts} from "@/api/system/post";

export default {
    data() {
        return {
            openDepartment: false,
            closeFlag: true,
            tags: [],
            // 遮罩层
            loading: true,
            // 部门名称
            deptName: undefined,
            defaultProps: {
                children: "children",
                label: "name"
            },
            deptOptions: []
        }
    },
    props: ['tagsList'],
    watch: {
        // 根据名称筛选部门树
        deptName(val) {
            this.$refs.tree.filter(val);
        }
    },
    created() {
        this.getTreeselect();
    },
    methods: {
          filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        init() {
            this.openDepartment = true
            if (this.tagsList) {
                this.tags = this.tagsList
                this.$refs.tree?.setCheckedNodes(this.tagsList)
            }
        },
         /** 查询部门下拉树结构 + 岗位下拉 */
        getTreeselect() {
            listSimpleDepts().then(response => {
                // 处理 deptOptions 参数
                this.deptOptions = [];
                this.deptOptions.push(...this.handleTree(response.data, "id"));
            });
            listSimplePosts().then(response => {
                // 处理 postOptions 参数
                this.postOptions = [];
                this.postOptions.push(...response.data);
            });
        },
        handleCheckChange(data, checked, indeterminate) {
            this.tags = this.$refs.tree.getCheckedNodes()
        },
        clear() {
            this.tags = []
            this.deptName = ''
            this.$refs.tree.setCheckedKeys([]);
        },
        handleClose(tag) {
            this.tags.splice(this.tags.indexOf(tag), 1)
            this.$refs.tree.setCheckedNodes(this.tags)
        },
        cancel() {
            this.clear()
            this.deptName = ''
            this.openDepartment = false
        },
        select() {
            this.$emit( 'departmenInfo',this.tags )
            this.openDepartment = false
            this.cancel()
        }
    }
}
</script>

<style lang="scss" scoped>
    .choiceList{
        border: 1px dashed;
        height: 50px;
        padding: 10px 20px;
    }
    .choiceList .el-tag+.el-tag{
        margin-left: 10px;
    }
    .treeContent{
        // display: flex;
        margin-top: 20px;
    }
    .button{
        text-align: right;
        margin-top: 20px;
    }
    .head-container-tree{
        height: 240px;
        overflow: auto;
    }
</style>